<!--
 * @Date: 2022-11-26 10:43:49
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-11-29 14:45:50
 * @FilePath: \vue-admin-ts\src\views\main\components\pageContent\index.vue
 * @Description: pageContent
-->
<template>
  <div class="user_container">
    <div class="table_wrapper">
      <my-table
        :TableData="dataList"
        :options="contentConfig?.tableOptions"
        :total="total"
        :paginationAlign="contentConfig?.pageConfig?.paginationAlign"
        v-bind="contentConfig?.attrs"
        v-model:pageInfo="pageInfo"
      >
        <template #tableHeader>
          <div class="table_header">
            <h2>{{ props.title }}</h2>
            <div v-if="isCreate">
              <el-button size="large" type="primary">新建</el-button>
              <el-button size="large" icon="refresh"></el-button>
            </div>
          </div>
        </template>
        <template #operation="{ scope }">
          <div class="table_btn">
            <el-button
              link
              type="primary"
              @click="change(scope)"
              icon="edit"
              v-if="isUpdate"
              >修改</el-button
            >
            <el-button
              link
              type="primary"
              @click="deleteTable(scope)"
              icon="delete"
              v-if="isDelete"
              >删除</el-button
            >
          </div>
        </template>
        <template #enable="{ scope }">
          <div>
            <el-tag type="success" v-if="scope.row.enable === 1">启用</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
          </div>
        </template>
        <template #createAt="{ scope }">
          {{ DateFormat(scope.row.createAt) }}
        </template>
        <template #updateAt="{ scope }">
          {{ DateFormat(scope.row.updateAt) }}
        </template>

        <template
          v-for="item in otherPropSlots"
          #[item.slot]="{ scope }"
          :key="item.prop"
        >
          <template v-if="item.slot">
            <slot :name="item.slot" :row="scope.row"></slot>
          </template>
        </template>
      </my-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, defineExpose, watch, ref } from "vue";
import myTable from "@/components/Table/Table.vue";
import { DateFormat } from "@/utils/tools";
import { useStore } from "@/store";
import { usePermission } from "@/hooks/usePermission";

const props = defineProps({
  pageName: {
    type: String,
    require: true,
  },
  title: {
    type: String,
    default: "",
  },
  contentConfig: {
    type: Object,
    require: true,
  },
});
const isCreate = usePermission(props.pageName!, "create");
const isUpdate = usePermission(props.pageName!, "update");
const isDelete = usePermission(props.pageName!, "delete");
const isQuery = usePermission(props.pageName!, "query");
const pageInfo = ref({ currentPage: 1, pageSize: 10 });
const store = useStore();
const change = (scope: any) => {
  console.log("修改", scope);
};
const deleteTable = (scope: any) => {
  console.log("删除", scope);
};
const dataList = computed(() =>
  store.getters[`systemModule/pageListData`](props.pageName),
);
const total = computed(() =>
  store.getters[`systemModule/pageListCount`](props.pageName),
);
const otherPropSlots = props.contentConfig?.tableOptions.filter((item: any) => {
  if (item.slot === "enable") return false;
  if (item.slot === "createAt") return false;
  if (item.slot === "updateAt") return false;
  if (item.slot === "operation") return false;
  if (item.slot) {
    return true;
  }
});
const getData = (queryInfo?: any) => {
  if (isQuery) {
    store.dispatch("systemModule/getPageListAction", {
      pageName: props.pageName,
      queryInfo: {
        offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
        size: pageInfo.value.pageSize,
        ...queryInfo,
      },
    });
  }
};
watch(pageInfo, () => {
  getData();
});
defineExpose({
  getData,
});
onMounted(() => {
  if (
    props.contentConfig?.pageConfig.pageInfo &&
    Object.values(props.contentConfig?.pageConfig.pageInfo).length !== 0
  ) {
    pageInfo.value.currentPage =
      props.contentConfig?.pageConfig.pageInfo.currentPage;
    pageInfo.value.pageSize =
      props.contentConfig?.pageConfig.pageInfo.pageSizes;
  }

  getData();
});
</script>
<style lang="less" scoped>
.user_container {
  padding: 20px 20px 0 20px;
  .table_wrapper {
    margin-top: 20px;
    padding-bottom: 20px;
    .table_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
